<template>
	<view class="shop-item-wrap">
		<view class="shop-item">
			<view class="left">
				<view class="shop-name" :style="shop.is_close ? 'color: #999':''">{{shop.name}}</view>
				<view v-if="shop.kefu_phone">
					<view class="shop-phone" v-if="shop.is_close">
						<image class="shop-img" src="../static/images/phone.png"></image>
						<text class="contact" style="color: #999999;">联系商家</text>
					</view>
					<view class="shop-phone" v-else  @click.stop="callPhone('tel:'+shop.kefu_phone)" >
						<!-- <a :href="'tel:'+ shop.kefu_phone" > -->
							<image class="shop-img" src="../static/images/phone2.png"></image>
							<text  class="contact" style="color: #25ADFF;">联系商家</text>
						<!-- </a> -->
					</view>
				</view>
			</view>
			<view class="right">
				<image v-if="shop.logo" class="shop-img" :src="shop.logo" lazy-load></image>
				<view v-else class="shop-img no-img" ></view>
				<view class="tag" v-if="shop.is_close">未营业</view>
			</view>
		</view>
		
		<!-- 配送费 月售 -->
		<view class="delivery-mouthSale">
			<text class="scale">
				{{shop.delivery_fee-0?`配送 ${currency}${shop.delivery_fee} 起`:'免配送'}}
			</text>
			<text class="line scale" v-if="shop.mouth_sale_count">|</text>
			<text v-if="shop.mouth_sale_count" class="scale">
				月售{{shop.mouth_sale_count && shop.mouth_sale_count > 9999?'9999+':shop.mouth_sale_count}}
			</text>
		</view>
	</view>
</template>

<script>
	import common from '../../../utils/common.js';
	export default {
		name: 'shopItem',
		data() {
			return {
				currency: '¥',
			}
		},
		props:['shop'],
		created() {
			common.changeCurrency(this);
		},
		methods:{
			callPhone(tel) {
				 window.location.href = tel
			}
		}
	}
		
</script>

<style scoped>
	.shop-item-wrap {
		padding: 8upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 12px;
		width: 100%;
		height: 80px;
		border: 1rpx solid rgb(0,0,0,.1);
		border-radius: 5px;
		box-sizing: border-box;
	}
	.delivery-mouthSale {
		width: 100%;
		font-size: 20upx;
		align-self: flex-end;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.scale {
		transform: scale(0.9);
	}
	.line {
		font-size: 20upx;
	}
	.shop-item {
		display: flex;
	}
	.right {
		/* width: 50px; */
		height: 50px;
		position: relative;
	}
	.shop-img {
		width: 45px;
		height: 45px;
		margin: 5px 0px;
		border-radius: 3px;
	}
	.left {
		flex: 1;
		/* margin: 5px; */
		/* margin: 0 5px; */
		white-space: nowrap;
		overflow: hidden;
	}
	.left .shop-name {
		/* max-width: 50%; */
		overflow: hidden;
		font-size: 14px;
		font-weight: 600;
		height: 30px;
		line-height: 30px;
		vertical-align: middle;
		padding-right: 5px;
	}
	.shop-phone .shop-img {
		width: 14px;
		height: 14px;
		line-height: 20px;
		/* margin-top: 5px; */
		vertical-align: middle;
	}
	.shop-phone .contact {
		height: 20px;
		line-height: 20px;
		margin-top: 5px;
		vertical-align: middle;
	}
	.no-img {
		background-color: #F7F7F7;
	}
	.tag {
		position: absolute;
		left: 0;
		bottom: 3px;
		width: 45px;
		height: 20px;
		line-height: 20px;
		vertical-align: middle;
		background: rgba(0,0,0,.4);
		text-align: center;
		color: #FFFFFF;
		font-size: 600;
		border-radius: 10px;
	}
	
	/*去除a标签样式*/
	a {
	    text-decoration: none;
	}
	/*正常的未被访问过的链接*/
	a:link {
	    text-decoration: none;
	}
	/*已经访问过的链接*/
	a:visited {
	    text-decoration: none;
	}
	/*鼠标划过(停留)的链接*/
	a:hover {
	    text-decoration: none;
	}
	/* 正在点击的链接，鼠标在元素上按下还没有松开*/
	a:active {
	    text-decoration: none;
	}
	/* 获得焦点的时候 鼠标松开时显示的颜色*/
	a:focus {
	    text-decoration: none;
	}
</style>
